import React, { Component } from "react";

export default class Footer extends Component {
  constructor(){
    super()
    this.state = {
      tabArr:['所有任务','未完成','已完成']
    }
  }
  render() {
    let {leftNum,tabIdx,handleDelComplete,handleTab} = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong> {leftNum} </strong>
          <span>item{leftNum>1?'s':''} left</span>
        </span>
        <ul className="filters">
          {
            this.state.tabArr.map((item,index)=>{
              return <li key={item} onClick={()=>{handleTab(index)}}>
                <span className={index===tabIdx?"selected":""}>{item}</span>
              </li>
            })
          }
        </ul>

        <button className="clear-completed" onClick={handleDelComplete}>删除已完成</button>
      </footer>
    );
  }
}
